import React, { Component } from 'react';

//*引入index的样式
import "./Index.scss"

//! 引入请求
import { index_banner, index_nav, index_goodlist } from "../uilts/apis";

//*引入插件(.....)



//*引入btnbar
import Btnbar from './Btnbar';

class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            banner: [],
            nav: [],
            indexone: 1,
            shoplist: []
        }
    }

    componentDidMount() {
        //*轮播图
        index_banner().then((ok) => {
            // console.log(ok.data.list);
            this.setState(
                this.state.banner = ok.data.list
            )
            // console.log(this.state.banner);
        })
        //*导航
        index_nav().then((ok) => {
            // console.log(ok.data.list);
            this.setState(
                this.state.nav = ok.data.list
            )
        })

        //*首页推荐
        index_goodlist({ page: this.state.indexone }).then((ok) => {
            console.log(ok.data);
            this.state.shoplist = ok.data.list
        })
    }

    //*触发分类列表
    cliklist = (index) => {
        console.log(index);
        this.setState({
            indexone: index+1
        })

        //*首页推荐
        index_goodlist({ page: this.state.indexone }).then((ok) => {
            console.log(ok.data);
            this.state.shoplist = ok.data.list
        })
    }


    render() {
        return (
            <div className='index'>
                <div className="top">
                    <input type="text" placeholder='请输入商品' />
                    <div className="sousuo">搜索</div>
                </div>
                <div className="swip">
                    {
                        this.state.banner.map((item, index) => {
                            return (
                                <img src={item.pic} alt="" />
                            )
                        })
                    }
                </div>
                <div className="btnlist">
                    {
                        this.state.nav.map((item,index) => {
                            return (
                                <div className="list" onClick={() => { this.cliklist(index) }} >
                                    <img src={item.pic} alt="" />
                                    <div className="name">
                                        {item.name}
                                    </div>
                                </div>
                            )

                        })
                    }
                </div>
                <div className="img">
                    <img src="https://pic.cdfgsanya.com/assets/upload/visual/b33ce4725f99beef9c14d11f60455ec7.png?1663652087270" alt="" />
                </div>
                <div className="shoplist">
                    {
                        this.state.shoplist.map((item, index) => {
                            return (
                                <div className="shop">
                                    <img src={item.pic} alt="" />
                                    <div className="name">{item.brand} </div>
                                    <span className="money">{item.salesPrice.name}  </span>
                                    <div className="qiang">抢购价￥ <span> {parseInt(item.salesPrice.value)} </span></div>
                                </div>

                            )
                        })
                    }

                </div>
                <Btnbar></Btnbar>
            </div >
        );
    }
}

export default Index;